$('#header').load('head.html')

$('.main-left span').hover(function(){  
    $(this).parent().siblings('b').stop().animate({
        right:"-13px",
        color:"yellow"
    },500)
    
},function(){
    $(this).parent().siblings('b').stop().animate({
        right:"-10px",
        color:"red"
    },500)
})
    let oUl = document.querySelector('main ul')
    console.log(oUl)

    pAjax({
    url:"../server/list.php",
    data:{
        pagenum:1,
        pagesize:12
    }
        }).then(function(res){  
        let json = JSON.parse(res)
        console.log(json.data)
        oUl.innerHTML = ''
        json.data.forEach(function(ele,index){
            let str = `<li>
            <a href="javascript:;">
                <div class="commdity">
                    <div class="picture">
                        <img data-id="${ele.goods_id}" src="${ele.goods_bigPic1}" alt="">
                    </div>
                    <span>${ele.goods_name}</span>
                </div>
            </a>
            <p>${ele.goods_able}</p>
            <section>￥<span>${ele.goods_price}</span></section>
            <a href="javascript:;"><div class="meng">
            <img data-id="${ele.goods_id}"  src="${ele.goods_bigPic2}" alt="">
        </div></a>
        </li>`
       oUl.innerHTML += str

       let oLi = document.querySelectorAll('main ul li')
       let oCom = document.querySelectorAll('.commdity')
       let oMeng = document.querySelectorAll('.meng')
       let oSpan = document.querySelectorAll('.commdity span')

       oLi.forEach(function(ele,index){
            ele.addEventListener('mouseover',function(){
                oMeng[index].style.display = 'block'
            })
            ele.addEventListener('mouseout',function(){
                oMeng[index].style.display = 'none'
            })
       })
       oCom.forEach(function(ele,index){
            ele.addEventListener('mouseover',function(){
                oSpan[index].style.textDecoration = 'underLine'
            })
            ele.addEventListener('mouseout',function(){
                oSpan[index].style.textDecoration = 'none'
            })
            oSpan[index].addEventListener('mouseout',function(){
                oSpan[index].style.textDecoration = 'none'
            })
            oMeng[index].addEventListener('mouseout',function(){
                oSpan[index].style.textDecoration = 'none'
            })
       })   
        })
})

oUl.addEventListener('click', function (ev) {
    console.log(window.location.href)
    // 查看详情
    if (ev.target.tagName === 'IMG' || ev.target.tagName === 'SPAN' || ev.target.className === 'commdity') {
        console.log(ev.target)
        let id = ev.target.getAttribute('data-id')
        window.location.href = 'detalis.html?id='+id
        localStorage.setItem('detailId', id)
    }
})

// 返回顶部
;(function () {
    $('.return').mouseenter(function () {
        $(this).css({
            background: '#333',
            color: '#fff'
        })
    })
    $('.return').mouseleave(function () {
        $(this).css({
            background: '#fff',
            color: '#333'
        })
    })
    
})();
$(document).ready(function() {
    $(".return").hide();
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 50) {
          $(".return").fadeIn(200);
        } else {
          $(".return").fadeOut(200);
        }
      });
      $(".return").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        500);
        return false;
      });
    });
  });

$('#foot').load('foot.html')